<template>
    <div class="my-list">
        <slot></slot>
        <ul class="list">
            <li v-for="item,index in list" :key="item.id">
                {{index}}
                <input type="checkbox" v-model="item.status" @change="changeStatus(item.status,item.id)">
                <p>{{item.title}}</p>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['list'],
    data() {
        return {
            
        }
    },
    methods: {
        del(id){
            this.$store.commit('del',id)
        },
        changeStatus(status,id){
            this.$store.commit('changeStatus',{status,id})

        }
    },
}
</script>
<style lang="scss" scoped>
.my-list{
    width: 1200px;
    margin: 0 auto;
}
.list li{
    display: flex;
    p{
        flex:1;
    }

}
</style>
